import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'
import { AtForm, AtInput, AtButton, AtIcon } from 'taro-ui'
import './register.scss'


@inject('counterStore')
@observer
class Register extends Component {

    config = {
        navigationBarTitleText: '注册登录',
        navigationBarTextStyle: 'black',
        navigationBarBackgroundColor: '#fff',
    }
    constructor() {
        super(...arguments)
        this.state = {
            value: '',
            tel: require('../../img/tel.png'),
            code: require('../../img/code.png'),
        }
    }
    onSubmit = (event) => {
        console.log(event.detail.value)
    }
    onReset = (event) => {
        console.log(event.detail.value)
    }
    handleChange = (value) => {
        this.setState({
            value
        })
    }
    componentWillMount() {
        console.log('componentWillMount----');
    }

    componentWillReact() {
        console.log('componentWillReact')
    }

    componentDidMount() { }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    increment = () => {
        const { counterStore } = this.props
        counterStore.increment()
    }

    decrement = () => {
        const { counterStore } = this.props
        counterStore.decrement()
    }

    incrementAsync = () => {
        const { counterStore } = this.props
        counterStore.incrementAsync()
    }

    render() {
        const { counterStore: { counter } } = this.props
        const { tel, code } = this.state;
        return (
            <View className='register-page'>
                <AtForm
                    onSubmit={() => this.onSubmit()}
                    onReset={() => this.onReset()}
                >
                    <View className="input-box">
                        <View className="title"> <image src={tel} alt="" /><label>手机号码</label></View>
                        <View className="getCodeBox">
                            <AtInput
                                name='value'
                                title=''
                                type='text'
                                placeholder='请输入手机号码'
                                value={this.state.value}
                                onChange={() => this.handleChange(this)}
                            />
                        </View>
                    </View>
                    <View className="input-box">
                        <View className="title"> <image src={code} alt="" /><label>验证码</label></View>
                        <View className="getCodeBox">
                            <AtInput
                                style={{ flex: 1 }}
                                name='value'
                                title=''
                                type='text'
                                placeholder='请输入验证码'
                                value={this.state.value}
                                onChange={this.handleChange.bind(this)}
                            />
                            <View className="getcode">获取验证码</View>
                        </View>
                    </View>
                    <View className="login">登录</View>    
                    {/* <AtButton formType='submit'>提交</AtButton> */}
                    {/* <AtButton formType='reset'>重置</AtButton> */}
                </AtForm>
            </View>
        )
    }
}

export default Register 
